<template>
  <el-dialog
    :visible.sync="show"
    width="600px"
    top="100px"
    :modal="true"
    :show-close="false"
    custom-class="shade_modal"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <div slot="title" class="title_close">
      <div class="title">{{ title }}</div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="handleClose" />
    </div>
    <textarea
      v-model="content"
      name=""
      cols="30"
      rows="10"
      placeholder=""
      id="textpanel"
    ></textarea>
    <div class="emojipanelbox">
      <el-upload
        class="upload-demo"
        :action="uploadURL"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :headers="getAuthHeaders()"
        :before-remove="beforeRemove"
        :on-success="afterUpload"
        :before-upload="beforeAvatarUpload"
        multiple
        :limit="6"
        accept="image/jpeg, image/jpg,image/png"
        :on-exceed="handleExceed"
        list-type="picture-card"
        :file-list="fileList"
      >
        <div class="upload">
          <img src="@/assets/img/icon_tp.png" alt="" v-if="commentType == 1" />
          <span v-else></span>
          <el-button type="primary" @click.stop="postContent">{{
            $t("inccom.comment_dialog.56hu7ugz9s40")
          }}</el-button>
        </div>
      </el-upload>
      <el-dialog
        class="pictureDia"
        :visible.sync="dialogVisible"
        :modal="false"
      >
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
    <div slot="footer" class="dialog-footer"></div>
  </el-dialog>
</template>
<script>
import { compressAccurately } from "image-conversion";
import {post_comment, post_reply} from '@/assets/js/API/user.js';
export default {
  props: {
    show: Boolean,
    showObj: String,
    commentType: Number,
    commentObj: Object,
    repayObj: Object,
  },
  data() {
    return {
      title: this.$t("inccom.comment_dialog.56hu7ub5W6o0"), // 评论标题
      content: "", // 评论内容
      userInfo: {}, // 用户信息
      isShowEmojiPanel: false,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      image: "",
      isImg: true, // 上传非图片类型自动删除
    };
  },
  created() {
    this.lang = localStorage.getItem("lang");
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
  },
  methods: {
    // 图片上传前的认证
    beforeAvatarUpload(file) {
      this.isImg = true;
      let types = ["image/jpeg", "image/jpg", "image/png"];
      const isImage = types.includes(file.type);
      if (!isImage) {
        this.$message.error(
          `${this.$t("inccom.comment_dialog.56hu7uWgb6o0")} JPG、JPEG、PNG!`
        );
        return (this.isImg = false);
      }
      return new Promise(async (resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 2; // 判定图片大小是否小于4MB
        if (isLt2M) {
          resolve(file);
        }
        console.log(file); // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        // const res = await compressAccurately(file, {
        //   size: 200,
        //   width: 200,
        //   height: 150,
        // });
        const res = await compressAccurately(file, 400);
        console.log(res);
        resolve(res);
      });
    },
    // 图片上传成功后的回调
    afterUpload(response) {
      // 保存图片地址
      this.fileList.push({ url: response.data.url });
      // 发起修改上传图片的请求
    },
    handleRemove(file) {
      // 删除指定图片
      for (let val = 0; val < this.fileList.length; val++) {
        if (file.uid == this.fileList[val].uid) {
          this.fileList.splice(val, 1);
          break;
        }
      }
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`${this.$t("inccom.comment_dialog.56hu7ub5W510")}`);
    },
    beforeRemove(file, fileList) {
      if (this.isImg)
        return this.$confirm(this.$t("inccom.comment_dialog.56hu7ugzb6o0"));
    },
    // 关闭
    handleClose() {
      this.content = "";
      this.fileList = new Array();
      this.image = "";
      this.$emit("close", this.showObj);
    },
    // 发表评论
    async postContent() {
      if (this.fileList.length > 0) {
        for (let i = 0; i < this.fileList.length; i++) {
          if (i < this.fileList.length - 1)
            this.image = this.image + this.fileList[i].url + ",";
          else this.image = this.image + this.fileList[i].url;
        }
      }
      if (this.content == "")
        return this.$message.error(
          this.$t("inccom.comment_dialog.56hu7ugzbg00")
        );
      // 发表评论
      let res;
      if (this.commentType == 1) {
        // 新建评论
        res = await post_comment({
          market: this.StockData.market,
          securityType: this.StockData.securityType,
          symbol: this.StockData.symbol,
          content: this.content,
          image: this.image,
        });
      } else if (this.commentType == 2) {
        // 回复当前评论
        res = await post_reply({
          commentId: this.commentObj.id,
          toUid: this.commentObj.fromUid,
          content: this.content,
        });
      } else {
        res = await post_reply({
          commentId: this.repayObj.commentId,
          toUid: this.repayObj.fromUid,
          content: this.content,
          replyId: this.repayObj.replyId,
        });
      }
      if (res.code != 1) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.content = "";
      this.$emit("reflash");
      this.handleClose();
      return;
    },
  },
  watch: {},
  computed: {
    StockData() {
      return this.$store.state.index.StockData;
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/upload.less";
.shade_modal {
  .el-dialog__title {
    font-size: 14px;
    color: @fff;
  }
  textarea {
    width: 100%;
    background: none;
    border: 1px solid @LightBorderLine;
    padding: 5px 10px;
    resize: none;
    height: 395px;
    font-size: 12px;
    color: @hoverColor;
    box-sizing: border-box;
    display: block;
  }
  .el-button {
    background: @hoverColor;
    color: @fff;
    width: 130px;
    height: 30px;
    line-height: 30px;
    border: 1px solid @hoverColor;
    padding: 0;
  }
  .el-button.canlca {
    background: @bgColor;
    color: @fbSix;
    border: 1px solid @bgColor;
  }
  .el-dialog__body {
    padding-bottom: 0 !important;
  }
  .el-dialog__footer {
    height: 10px;
    text-align: right;
  }
  .emojipanelbox {
    position: relative;
    margin-top: 19px;
    .upload {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
    }
  }
  .emoji-panel-btn {
    width: 22px;
    height: 22px;
    margin-right: 15px;
    display: block;
    float: left;
    background: url(~@/assets/img/icon_bq.png) no-repeat center;
    background-size: 100% auto;
    cursor: pointer;
  }
}
</style>